            
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统首页</title>
    <link rel="stylesheet" href="{$CSS}/bootstrap3.3.7.min.css">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <style>
         td,th{
             text-align: center;vertical-align: middle !important;
             border-color:#C1DAD7 !important;
        }
        td input{
            width:50% !important;
            margin: 0 auto;
        }
        .info{
            background: #D5EDEF
        }
        .table-bordered{
            border-color:#D5EDEF
        }
    </style>
</head>

<body>
    <div style="padding:10px;border-bottom:1px solid #eee;font-size:15px;font-weight:700">用户套餐名称
</div>
    <div style="padding:20px">
       <form class="form-horizontal form-group" action="" method="post">
            <table class="table table-bordered table-hover">
              <thead>
                <tr class="info">
                  <th class="col-md-6">级别</th>
                  <th class="col-md-6">套餐名称</th>
                  <th class="col-md-6">操作</th>
                </tr>
              </thead>
              <tbody>
			         {loop $types as $r}
                <tr>
                  <td>
					  {$r->typeid}<!--<input type="text" class="form-control" disabled="disabled" style="background:#CCCCCC" value="{$r->typeid}" name="typeid@{$r->id}"/>-->
                  </td>
                  <td>
					  <input type="text" class="form-control" value="{$r->typename}" name="typename@{$r->id}"/>
                  </td>
                  <td>
                    <span class="btn btn-primary" onclick="delete_type({$r->id})">删除</span>
                  </td>
                </tr>
                {/loop} 
              </tbody>
            </table>
            <button class="btn btn-primary"  type="button" onclick="add_type_div()">添加套餐</button>
            <button class="btn btn-primary" name="btnAdd" ID="btnAdd" type="submit">提交</button>
        </form>    
    </div>
    <form>
      <div class="" id="addTypeDiv" style="display: none;">
        <div class="">
          <h2 class="" style="text-align: center; font-size: 20px; font-weight: bold; padding:20px 0;"> 添加套餐 </h2>
          <div class="layui-form-item">
              <label class="layui-form-label" style="width: 100px;">套餐名称:</label>
              <div class="layui-input-block">
                <input type="text" style="width: 90%;" name="name" id="name" class="layui-input" autocomplete="off" placeholder="请输入名称"> 
              </div>
          </div>
          <div class="" style="display: flex; justify-content: flex-end;padding: 20px;margin-right: 40px;">
            <button id="" type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="parent.layer.closeAll()" style=""> 取消</button>
            <button id="" type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="add_type()"> 确定</button>
          </div>
        </div>
      </div>
    </form>
</body>
<script src="/layui/layui.js"></script>
<script type="text/javascript">
  //删除套餐
  function  delete_type(id){
    if(confirm('确定删除此套餐吗？')){
      ajax('operatetype-del.html',{ id:id},function(data){
        if(data == 'ok'){
          tusi('操作成功');
          setTimeout(function(){
            goto(location.href);
          },500);
        }else if(data == 'no'){
          tusi('操作失败');
        }else if(data == 'userexist'){
          tusi('请先把此级别的子级代理移动其它级别');
        }
      });
    } 
  }
  //弹框
  layui.use('layer', function(){
      var layer = layui.layer;
    }); 
  //显示添加套餐弹框
  function  add_type_div(){
    layer.open({
      title: [' ', 'font-weight:bold;'],
      type: 1,
      area: ['700px', '250px'],
      shadeClose: true,
      content: $('#addTypeDiv')
    })  
  }
  function add_type(){
    var name = $("#name").val();
    console.log(name);
    if(!name){
      layer.msg('请填写套餐名称',!{icon: 5});
      return false;
    }
    ajax('operatetype-add.html',{ name:name},function(data){
      console.log(data);
      if(data == 'ok'){
        layer.msg('操作成功',!{icon: 6});
        setTimeout(function(){
          goto(location.href);
        },500);
      }else{
        layer.msg('操作失败',!{icon: 5});
      }
    });
  }
</script>
</html>